<template>
  <div>
    <div class="sub-title-bg flex-row justify-between align-center">
      <span class="sub-title">{{subTitle}}</span>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RightTitle',
  props: {
    title: String,
    subTitle: String
  },
  data () {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.big-title-bg {
  background: url('@/assets/images/title-ll.png') no-repeat;
  background-size: 100% 100%;
  width: 749px;
  height: 39px;

  .big-title {
    margin-left: 35px;
    font-size: 30px;
    font-family: YouSheBiaoTiHei;
    font-weight: normal;
    color: #f8f8f8;
    line-height: 42px;
  }
}

.sub-title-bg {
  background: url('@/assets/images/title-l.png') no-repeat;
  background-size: 100% 100%;
  width: 439px;
  height: 39px;

  .sub-title {
    margin-left: 35px;
    font-family: YouSheBiaoTiHei;
    font-size: 30px;
    color: #ffffff;
    line-height: 42px;

    font-weight: normal;
    color: #f8f8f8;
  }
}
</style>